<script setup>
import {onMounted, onUnmounted, reactive, ref} from 'vue'
import { init, dispose } from 'klinecharts'
import {GetKLineData} from "@/api/websocket";
import {ElMessageBox} from "element-plus";
import {getStrategy} from "@/api/strategy";
import dayjs from 'dayjs'

const timeList = reactive([
 {
  name: '分',
  id: '1m'
 },
 {
  name: '5分',
  id: '5m'
 },
 {
  name: '15分',
  id: '15m'
 },
 {
  name: '30分',
  id: '30m'
 },
 {
  name: '时',
  id: '60m'
 },
 {
  name: '天',
  id: '1440m'
 },
])

// 切换时间刻度
const currentTime = ref('1m')
const onTimeChange = e => {
 currentTime.value = e
}

const ruleForm = reactive({
 interval: '1m',
 symbol: '',
 delay: 60
})

// 获取k线图数据
const getData = async (strategy_id) => {
 try {
  const res = await GetKLineData({strategy_id})
  res.data.forEach(item => {
   item.trade_time = new Date(item.trade_time).getTime()
  })
  console.log(res)
 } catch (e) {}
}

// 清仓
const onClearance = () => {
 ElMessageBox.confirm('是否开启清仓?', '提示', {
  cancelButtonText: '取消',
  confirmButtonText: '确认'
 }).then(() => {}).catch(() => {})
}

onMounted(() => {
 const chart = init('chart')

 chart.setTimezone('Asia/Shanghai')

 chart.setThousandsSeparator({
  format: value => {
   const sign = '.'
   const v = `${value}`
   if (v.includes('.')) {
    const arr = v.split('.')
    return `${arr[0].replace(/(\d)(?=(\d{3})+$)/g, $1 => `${$1}${sign}`)},${arr[1]}`
   }
   return v.replace(/(\d)(?=(\d{3})+$)/g, $1 => `${$1}${sign}`)
  }
 });

 chart.applyNewData([
  { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
  { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
  { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
  { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
  { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
  { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
  { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
  { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
  { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
  { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
 ])
})

onUnmounted(() => {
 dispose('chart')
})

// 获取产品
const product = ref([])
const getProduct = () => {
 Promise.try(() => {
  return getStrategy()
 }).then(res => {
  product.value = res.data

  ruleForm.symbol = res.data[0].symbol

  getData(res.data[0].id)
 }).catch(err => {})
}

getProduct()

// 开启websocket
// const ws = new WebSocket('ws://1.12.74.78:10983/api/real_time/k_line?interval=1m&symbol=RB888&delay=60')
// ws.onopen = (res) => {
//  console.log(res)
// }
// ws.onmessage = res => {
//  console.log(res)
// }
</script>

<template>
 <el-main>
  <div class="header flex">
   <el-select v-model="ruleForm.symbol">
    <el-option v-for="item of product" :key="item.symbol" :label="item.symbol" :value="item.id" />
   </el-select>

   <div class="time flex">
    <label>时间间隔：</label>
    <div class="time_li flex">
     <a v-for="(item, index) of timeList" @click="onTimeChange(item.id)" :class="currentTime === item.id ? 'active' : ''" :key="index">{{ item.name }}</a>
    </div>
   </div>

   <div class="btns">
    <el-button type="primary" @click="onClearance">清仓</el-button>
   </div>
  </div>

  <div id="chart" class="chart" />
 </el-main>
</template>

<style scoped lang="scss">
.el-main {
 display: flex;
 height: 33.33%;
 flex-direction: column;
 border-bottom: 1px solid $card_border_color;
}

.chart {
 width: 100%;
 height: 300px;
}

.header {
 margin-bottom: 20px;
 align-items: center;

 .el-select {
  margin-right: 20px;
  width: 150px;
  ::v-deep {
   .el-select__wrapper {
    background-color: transparent;
    box-shadow: 0 0 0 1px $card_border_color inset;
   }
  }
 }

 .time {
  align-items: center;

  label {
   margin-right: 10px;
   color: $colorA;
  }
  a {
   &:not(:last-child) {
    margin-right: 15px;
   }
   color: $colorA;

   &.active {
    color: $white;
   }
  }
 }

 .btns {
  margin-left: auto;
 }
}
</style>